import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Switch, Route } from 'react-router-dom';
import Toggle from '../component/common/Toggle';
import { Drawer, Tree } from 'antd'
import SideBar from '../component/SideBar';
import AsyncLoad from '../component/common/AsyncLoad';
class Docs extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isClose: true
        }
    }
    toggle = () => {
        const { isClose, visible } = this.state;
        this.setState({
            isClose: !isClose,
            visible: !visible
        })
    }
    AsyncDocs = AsyncLoad({ loader: () => import('./Docs/DocsMain') })
    AsyncDetail1 = AsyncLoad({ loader: () => import('./Docs/Detail1') })
    render() {
        const { isClose, visible } = this.state;
        return (
            <div>
                <Switch>
                    <Route exact path='/Docs' component={this.AsyncDocs} />
                    <Route path='/Detail1' component={this.AsyncDetail1} />
                </Switch>
                <Toggle isClose={isClose} onToggle={this.toggle} />
                <SideBar visible={visible} />
            </div>
        )
    }
}

export default connect()(Docs)